<template>
  <div class="detail">
    <div class="share-top">
      <h3 class="title">知识共享</h3>
    </div>
    <div class="detailSharing">
      <h3 class="d-title">
        <div class="left">
          <!-- <span class="word"></span> -->
          {{detail.title}}
        </div>
        <i class="back" @click="back">返回</i>
      </h3>
      <ul class="d-info">
        <li>
          <b>所属区域：</b>
          {{detail.areaName}}
        </li>
        <li>
          <b>所属栏目：</b>
          {{detail.typeName}}
        </li>
        <li>
          <b>所属时间：</b>
          {{detail.fileYear}}-{{detail.fileMonth}}
        </li>
        <li>
          <b>上传人：</b>
          {{detail.createUserName}}
        </li>
        <li>
          <b>点击/下载/跟帖：</b>
          {{detail.clickNum}}/{{detail.downNum}}/{{detail.msgNum}}
        </li>
        <li>
          <b>上传时间：</b>
          {{detail.uploadTime}}
        </li>
      </ul>
      <div class="d-brief">
        <h4 class="title">文章简介</h4>
        <p>{{detail.descript}}</p>
      </div>

      <div class="attachment">
        <h4 class="title">
          <b>附件列表</b>
          <!-- <span @click="downFile('all')" class="download">一键下载</span> -->
        </h4>
        <div class="attach-list">
          <div class="item" v-for="(it, index) in attachFiles" :key="index">
            <!-- IMAGE DOC EXCEL PPT PDF TXT -->
            <span
              class="pic"
              :class="{'word': it.attachType == 'WORD', 'txt': it.attachType == 'TXT',
                                     'excel': it.attachType == 'EXCEL', 'image': it.attachType == 'IMAGE',
                                      'pdf': it.attachType == 'PDF', 'ppt': it.attachType == 'PPT',}"
            ></span>
            <span class="text">{{it.attachName}}</span>
            <span @click="downFile(it)" class="down">下载</span>
          </div>
        </div>
      </div>

      <div class="attachment">
        <h4 class="title">
          <b>回复跟帖</b>
        </h4>
        <div class="commit-list" v-for="(item, index) in messageList" :key="index">
          <div class="top">
            <span class="part">{{item.areaName}}</span>
            <span class="name">{{item.userName}}</span>
            <span class="time">{{item.createTimeStr}}</span>
            <span class="reply" @click="item.isShow = true">回复</span>
            <span class="del" @click="deleteMessage(item.msgId)">删除</span>
          </div>
          <div class="mess">
            <p class="message">{{item.content}}</p>
            <div style="background-color: #fff; height: 10px;"></div>
            <div class="e-wrapper" :key="index" v-for="(it, index) in item.childList">
              <p class="e-top">
                <span class="td">{{it.areaName}}</span>
                <span class="bd">{{it.userName}}</span>
                <span class="md">{{it.createTimeStr}}</span>
                <span class="del" @click="deleteMessage(it.msgId)">删除</span>
              </p>
              <p class="e-message">{{it.content}}</p>
            </div>
          </div>
          <!-- <p class="floor">{{index + 1}}楼</p> -->
          <div class="textarea" v-if="item.isShow">
            <div class="wrapper">
              <textarea class="in" maxlength="200" v-model="item.replyInfo"></textarea>
            </div>
            <div class="wrapper-btn">
              <el-button size="small" type="primary" @click="item.isShow = false">取消发布</el-button>
              <el-button size="small" type="orange" @click="addReply(item)">发布</el-button>
            </div>
          </div>
        </div>
        <div class="public">
          <div class="wrapper">
            <textarea class="in" maxlength="200" v-model="replyInfo"></textarea>
          </div>
          <div class="wrapper-btn">
            <el-button size="small" type="primary" @click="replyInfo = ''">取消</el-button>
            <el-button size="small" type="orange" @click="pubulic()">发布</el-button>
          </div>
        </div>
      </div>

      <!-- <h3><span>{{detail.title}}</span><i class="el-icon-close" @click="back"></i></h3> -->
      <!-- <div class="content">
      <ol class="info">
        <li>所属区域：<b>{{detail.areaName}}</b></li>
        <li>所属栏目：<b>{{detail.typeName}}</b></li>
        <li>点击：<b>{{detail.clickNum}}</b></li>
        <li>上传时间：<b>{{detail.uploadTime}}</b></li>
     
      </ol>
      <el-button size="small" type="primary" @click="downFile" style="background: #7f92f7;border-color: #7f92f7">
        <span class="down">下载附件</span></el-button>
      </div>-->
      <!-- <div>
      文件描述：{{detail.descript}}
      </div>-->
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
export default {
  name: "uploadShareDetail",
  data() {
    return {
      detail: {
        createUserName: "",
        clickNum: "",
        title: "",
        areaName: "",
        typeName: "",
        uploadTime: "",
        descript: "",
      },
      attachFiles: "",
      replyInfo: "",
      messageList: [],
    };
  },
  created() {
    console.log(this.$route.path, 111);
    this.getData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    downFile(e) {
      let type = typeof e == "string" ? "all" : "single";
      let token = getCookie("token");
      let url = "";
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        if (type == "all") {
          url =
            prefixAPI.loc +
            "/api/sharedFiles/downLoadAttachFiles?fileId=" +
            this.$route.query.seq +
            "&token=" +
            token;
        } else {
          url =
            prefixAPI.loc +
            "/api/sharedFiles/downLoadAttachFile?attachId=" +
            e.attachId +
            "&token=" +
            token;
        }
      } else if (process.env.NODE_ENV == "production") {
        if (type == "all") {
          url =
            prefixAPI.hp +
            "/api/sharedFiles/downLoadAttachFiles?fileId=" +
            this.$route.query.seq +
            "&token=" +
            token;
        } else {
          url =
            prefixAPI.hp +
            "/api/sharedFiles/downLoadAttachFile?attachId=" +
            e.attachId +
            "&token=" +
            token;
        }
        // url = prefixAPI.hp + "/api/sharedFiles/downLoadAttachFile?fileId=" + this.$route.query.seq+"&token=" + token;
      }
      window.location.href = url;
      // const ass = document.getElementById('downLoad1');
      // console.log(this.url,a)
      // ass.click()
      // $budgetAPI.downLoadAttachFile({fileId:this.$route.query.seq},res=>{
      //   this.alertError(res);
      //   if(res.code == 0){
      //     // console.log(res)
      //     // 根据不同模式切换不同的路径
      //     if (process.env.NODE_ENV == 'development') {
      //       window.location.href = prefixAPI.loc + "/api/bottomUpEdit/templateDownload?areaId=" + this.$route.query.areaId + '&year=' + this.$route.query.year;
      //     } else if (process.env.NODE_ENV == 'production') {
      //       window.location.href = prefixAPI.hp + "/api/bottomUpEdit/templateDownload?areaId=" + this.$route.query.areaId + '&year=' + this.$route.query.year;
      //     }
      //     this.$message({
      //       type:"success",
      //       message:"下载成功",
      //     });
      //   }
      // },err=>{})
    },
    getData() {
      let that = this;
      that.fileId = this.$route.query.seq;

      $budgetAPI.budgetShareDetail(
        { fileId: this.$route.query.seq || that.fileId },
        (res) => {
          this.alertError(res);
          if (res.code == 0) {
            this.detail = res.content.fileInfo;
            this.attachFiles = res.content.attachFiles;
            res.content.leavingMessageList.length &&
              res.content.leavingMessageList.map((item) => {
                item.isShow = false;
                item.childList.map((it) => {
                  it.replyInfo = "";
                });
              });
            this.messageList = res.content.leavingMessageList;
          }
        },
        (err) => {}
      );
    },
    addReply(it) {
      let that = this;

      if (!it.replyInfo.length) {
        that.$message({
          type: "error",
          message: "请输入内容",
        });
        return false;
      }
      $budgetAPI.replyMessage(
        {
          fileId: it.fileId,
          msgId: it.msgId,
          content: it.replyInfo,
        },
        (res) => {
          that.alertError(res);
          if (res.code == 0) {
            it.isShow = false;
            that.$message({
              type: "success",
              message: "回复成功",
            });
            that.getData();
          }
        }
      );
    },
    pubulic() {
      let that = this;

      if (!that.replyInfo.length) {
        that.$message({
          type: "error",
          message: "请输入内容",
        });
        return false;
      }
      $budgetAPI.leavingMessage(
        {
          fileId: that.fileId,
          content: that.replyInfo,
        },
        (res) => {
          that.alertError(res);
          if (res.code == 0) {
            that.$message({
              type: "success",
              message: "留贴成功",
            });
            that.replyInfo = "";
            that.getData();
          }
        }
      );
    },
    deleteMessage(msgId) {
      let that = this;

      console.log(msgId);

      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $budgetAPI.deleteMessage(
            {
              msgId: msgId,
            },
            (res) => {
              that.alertError(res);
              if (res.code == 0) {
                that.$message({
                  type: "success",
                  message: "删除成功",
                });
                that.getData();
              }
            }
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
$title-color: #6a82fd;
$boder-color: #eaeaea;
$message-color: #f5f5f5;
.share-top {
  .title {
    color: $title-color;
    font-size: 16px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 18px;
    border-bottom: 1px solid $boder-color;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
.detailSharing {
  width: 100%;
  padding: 0 20px;
  /deep/ .el-card__body {
    padding: 0;
  }
  .d-title {
    color: #4e567b;
    // padding-top: 15px;
    margin-bottom: 20px;
    display: flex;
    text-align: left;
    .word {
      display: inline-block;
      background: url("~@/assets/images/common/word-copy@2x.png") 0 0 no-repeat;
      width: 18px;
      height: 20px;
      background-size: contain;
      margin-right: 10px;
      vertical-align: -3px;
    }
  }
  .back {
    border: 1px solid $title-color;
    color: $title-color;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 4px;
  }
  .d-info {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    color: #555;
    padding: 10px 20px;
    li {
      font-size: 12px;
      border-right: 1px solid #cdcdcd;
      padding-right: 18px;
      padding-left: 20px;
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        border-width: 0;
      }
      b {
        font-weight: bold;
        font-size: 12px;
      }
    }
  }
  .d-brief {
    margin-top: 20px;
    .title {
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px;
      color: #454545;
      height: 14px;
      line-height: 14px;
      border-left: 5px solid #7f92f7;
      padding-left: 6px;
    }
    p {
      text-indent: 2em;
      margin-top: 10px;
      padding-bottom: 25px;
      line-height: 18px;
      border-bottom: 1px solid #e2e2e2;
    }
  }
  .attachment {
    margin-top: 20px;
    .title {
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px;
      height: 14px;
      line-height: 14px;
      color: #454545;
      display: flex;
      align-items: center;
      justify-items: center;
      justify-content: space-between;
      b {
        border-left: 5px solid #7f92f7;
        padding-left: 6px;
        font-size: 14px;
        font-weight: bold;
        flex: 1;
      }
      .download {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        padding: 9px 15px;
        color: #fff;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        font-size: 12px;
        border-radius: 3px;
        background: url("~@/assets/images/common/xiazai.png") 0 0 no-repeat;
        background-size: 15px;
        background: #7f92f7;
        border-color: #7f92f7;
      }
    }
    .attach-list {
      margin-top: 10px;
      .item {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 1px dashed #bfbfbf;
        .pic {
          width: 15px;
          height: 18px;
        }
        .word {
          background: url("~@/assets/images/common/word-copy.png") 0 0 no-repeat;
          background-size: contain;
        }
        .txt {
          background: url("~@/assets/images/common/txt2x.png") 0 0 no-repeat;
          background-size: contain;
        }
        .excel {
          background: url("~@/assets/images/common/EXCEL@2x.png") 0 0 no-repeat;
          background-size: contain;
        }
        .image {
          background: url("~@/assets/images/common/IMAGE@2x.png") 0 0 no-repeat;
          background-size: contain;
        }
        .pdf {
          background: url("~@/assets/images/common/PDF@2x.png") 0 0 no-repeat;
          background-size: contain;
        }
        .ppt {
          background: url("~@/assets/images/common/PPT@2x.png") 0 0 no-repeat;
          background-size: contain;
        }
        .text {
          margin: 0 35px 0 8px;
          flex: 1;
          color: #555;
        }
        .down {
          border: 1px solid #7f92f7;
          height: 28px;
          color: #7f92f7;
          text-align: center;
          background: url("~@/assets/images/common/xiazai@2x.png") 10px 50%
            no-repeat;
          background-size: 13px;
          border-radius: 3px;
          padding: 6px 12px 6px 30px;
          cursor: pointer;
        }
      }
    }
  }
  h3 {
    color: #4e567b;
    margin-bottom: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    > i {
      cursor: pointer;
    }
  }
  h3 > span {
    display: flex;
    align-items: center;
  }
  h3 > span:before {
    margin-right: 6px;
    content: "";
    background-image: url("~@/assets/images/common/word-copy.png");
    background-size: cover;
    width: 14px;
    height: 16px;
    z-index: 100;
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .info {
    display: flex;
    align-items: center;
    > li {
      margin-right: 10px;
      color: #a8a8a8;
      > b {
        color: #888888;
      }
    }
  }
  // .down{
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  // }
  // .down:before{
  //   display: block; content:"";height: 100%;content: url('~@/assets/images/common/xiazai.png');
  //   margin-right: 6px;
  // }
}
.commit-list {
  margin-top: 10px;
  .top {
    display: flex;
    align-items: center;
    // background-color: #d7e5fb;
    background-color: rgba(224, 237, 249, 1);
    padding: 10px 30px;
    color: rgb(33, 27, 18);
    // font-weight: bold;
    .part {
      width: 120px;
    }
    .name {
      width: 120px;
    }
    .area {
      width: 120px;
    }
    .time {
      width: 140px;
      margin-right: 20px;
    }
    .reply {
      background: url("~@/assets/images/common/message-b.png") 0 50% no-repeat;
      width: 60px;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
      background-size: 16px 14px;
      cursor: pointer;
      color: #999;
    }
    .del {
      background: url("~@/assets/images/common/delete.png") 0 50% no-repeat;
      width: 60px;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
      background-size: 16px 14px;
      cursor: pointer;
      color: #999;
      margin-left: 10px;
    }
  }
  .floor {
    text-align: right;
    color: rgb(175, 83, 82);
    padding-right: 30px;
    // padding-bottom: 5px;
    background-color: $message-color;
    margin-bottom: 10px;
    padding-bottom: 15px;
  }
  .mess {
    display: flex;
    flex-direction: column;
    // margin: 10px 0;
    .name {
      width: 120px;
      text-align: right;
    }
    .message {
      flex: 1;
      text-indent: 2em;
      padding-bottom: 30px;
      padding-top: 10px;
      background-color: $message-color;
      // margin-bottom: 10px;
    }
  }

  .textarea {
    .wrapper {
      display: flex;
      .in {
        flex: 1;
        border-radius: 5px;
        resize: none;
        width: 100%;
        margin-left: 120px;
        border: 1px solid #bebebe;
        padding: 12px;
      }
    }
    .wrapper-btn {
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: right;
    }
  }
}
.e-wrapper {
  // border-bottom: 1px solid #cecaca;
  margin-bottom: 5px;
  padding-left: 24px;
  background-color: $message-color;
  &:last-child {
    border-bottom: 0 solid #fff;
  }
  .e-top {
    display: flex;
    padding-top: 10px;
    align-items: center;
    .td {
      margin-right: 15px;
    }
    .bd {
      margin-right: 15px;
    }
    .del {
      background: url("~@/assets/images/common/delete.png") 0 50% no-repeat;
      width: 60px;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
      background-size: 16px 14px;
      cursor: pointer;
      color: #999;
      margin-left: 40px;
    }
  }
  .e-message {
    margin: 10px 0;
    padding-left: 40px;
    // text-indent: 2em;
  }
}
.public {
  .wrapper {
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
    .in {
      flex: 1;
      border-radius: 5px;
      resize: none;
      height: 160px;
      width: 100%;
      border: 1px solid #bebebe;
      padding: 12px;
    }
  }
  .wrapper-btn {
    text-align: center;
  }
}
</style>
